<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品预览</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 360px;
        padding-top: 360px;
        border: 1px solid #eeeeee;
        margin: 100px auto;
        background: url('./imgs/01big.jpg' ) no-repeat;
     }
    .box ul{
        list-style: none;
        height: 70px;
        border: 1px solid #eeeeee;
    }
    .box ul li{
        float: left;
        height: 70px;
    }
    .box ul li img{
        cursor: pointer;
    }
</style>
<script>
    window.onload=function(){
     var box=document.getElementsByClassName("box")[0];
     var lis=document.getElementsByTagName("li");
     for(let i=0;i<lis.length;i++){
         lis[i].onclick=function(){
            box.style.backgroundImage="url('./imgs/0"+(i+1)+"big.jpg')";
         }
     }

    }
</script>
<body>
    <div class="box">
        <ul>
            <li><img src="./imgs/01.jpg" alt="商品图片"></li>
            <li><img src="./imgs/02.jpg" alt="商品图片"></li>
            <li><img src="./imgs/03.jpg" alt="商品图片"></li>
            <li><img src="./imgs/04.jpg" alt="商品图片"></li>
            <li><img src="./imgs/05.jpg" alt="商品图片"></li>
        </ul>
    </div>
</body>
</html>